// 邀请页面样式
.invite-container {
	min-height: 100vh;
	background: #ffffff;
	position: relative;
	display: flex;
	flex-direction: column;
}

.header-bg {
	height: 200rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
	position: relative;
	
	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="1" fill="rgba(45,178,149,0.1)"/><circle cx="80" cy="40" r="1.5" fill="rgba(45,178,149,0.1)"/><circle cx="40" cy="80" r="0.8" fill="rgba(45,178,149,0.1)"/></svg>');
		background-size: 80rpx 80rpx;
	}
}

.header-content {
	position: relative;
	z-index: 1;
	
	.welcome-text {
		font-size: 40rpx;
		font-weight: bold;
		margin-bottom: 15rpx;
		color: #333;
	}
	
	.sub-text {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 20rpx;
	}
	
	.inviter-info {
		background: rgba(45, 178, 149, 0.1);
		padding: 15rpx 25rpx;
		border-radius: 20rpx;
		border: 1rpx solid rgba(45, 178, 149, 0.2);
		
		.inviter-text {
			font-size: 24rpx;
			color: #2DB295;
			font-weight: 500;
		}
	}
}

.main-content {
	flex: 1;
	padding: 30rpx;
}

// 邀请码区域
.invite-code-section {
	margin: 20rpx 30rpx;
	padding: 40rpx;
	background: white;
	border-radius: 25rpx;
	box-shadow: 0 15rpx 40rpx rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
	width: 690rpx;
	
	.code-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.title-icon {
			margin-right: 15rpx;
			font-size: 36rpx;
		}
	}
	
	.code-display {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
		padding: 30rpx;
		border-radius: 20rpx;
		border: 2rpx solid #e9ecef;
		position: relative;

		.code-text {
			font-size: 40rpx;
			font-weight: bold;
			color: #667eea;
			font-family: 'Courier New', monospace;
			letter-spacing: 2rpx;
			flex: 1;
			text-align: left;
		}

		.copy-btn {
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			color: white;
			border: none;
			padding: 15rpx 25rpx;
			border-radius: 25rpx;
			font-size: 26rpx;
			display: flex;
			align-items: center;
			margin-left: 30rpx;
			flex-shrink: 0;
		}
	}
	
	.code-tip {
		text-align: center;
		font-size: 24rpx;
		color: #999;
		margin-top: 20rpx;
	}
}

// 邀请链接区域
.invite-link-section {
	margin: 20rpx 30rpx;
	padding: 40rpx;
	background: white;
	border-radius: 25rpx;
	box-shadow: 0 15rpx 40rpx rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
	width: 690rpx;
	
	.link-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.title-icon {
			margin-right: 15rpx;
			font-size: 36rpx;
		}
	}
	
	.link-display {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
		padding: 30rpx;
		border-radius: 20rpx;
		border: 2rpx solid #e9ecef;
		position: relative;

		.link-text {
			font-size: 24rpx;
			color: #667eea;
			flex: 1;
			text-align: left;
			word-break: break-all;
		}

		.copy-btn {
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			color: white;
			border: none;
			padding: 15rpx 25rpx;
			border-radius: 25rpx;
			font-size: 26rpx;
			display: flex;
			align-items: center;
			margin-left: 30rpx;
			flex-shrink: 0;
		}
	}
	
	.link-tip {
		text-align: center;
		font-size: 24rpx;
		color: #999;
		margin-top: 20rpx;
	}
}

// 二维码区域
.qrcode-section {
	margin: 20rpx 30rpx;
	padding: 40rpx;
	background: white;
	border-radius: 25rpx;
	box-shadow: 0 15rpx 40rpx rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
	width: 690rpx;
	
	.qrcode-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.title-icon {
			margin-right: 15rpx;
			font-size: 36rpx;
		}
	}
	
	.qrcode-display {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		background: #f8f9fa;
		border-radius: 20rpx;
		padding: 40rpx;
		border: 2rpx solid #e9ecef;

		.qrcode-image {
			width: 300rpx;
			height: 300rpx;
			border-radius: 15rpx;
		}

		.qrcode-loading {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.loading-spinner {
				width: 60rpx;
				height: 60rpx;
				border: 4rpx solid #f3f3f3;
				border-top: 4rpx solid #667eea;
				border-radius: 50%;
				animation: spin 1s linear infinite;
				margin-bottom: 20rpx;
			}
			
			.loading-text {
				font-size: 24rpx;
				color: #666;
			}
		}
	}
	
	.qrcode-tip {
		text-align: center;
		font-size: 24rpx;
		color: #999;
		margin-top: 20rpx;
	}
}

// 收益说明区域
.benefits-section {
	margin: 20rpx 30rpx;
	padding: 40rpx;
	background: white;
	border-radius: 25rpx;
	box-shadow: 0 15rpx 40rpx rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
	width: 690rpx;
	
	.benefits-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 30rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.title-icon {
			margin-right: 15rpx;
			font-size: 36rpx;
		}
	}
	
	.benefits-list {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 30rpx;
		
		.benefit-item {
			display: flex;
			align-items: center;
			padding: 20rpx;
			background: #f8f9fa;
			border-radius: 15rpx;
			
			.benefit-icon {
				font-size: 32rpx;
				margin-right: 15rpx;
			}
			
			.benefit-text {
				font-size: 26rpx;
				color: #666;
				flex: 1;
			}
		}
	}
}

// 底部操作按钮区域
.action-section {
	margin: 30rpx 0;
	padding: 0;
	
	.confirm-btn, .bind-btn {
		width: 100%;
		height: 88rpx;
		background: linear-gradient(135deg, #2DB295 0%, #1e8e6a 100%);
		color: white;
		border: none;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-weight: bold;
		box-shadow: 0 8rpx 20rpx rgba(45, 178, 149, 0.3);
		transition: all 0.3s ease;
		display: flex;
		align-items: center;
		justify-content: center;
		
		&:active {
			transform: translateY(2rpx);
			box-shadow: 0 4rpx 12rpx rgba(45, 178, 149, 0.3);
		}
		
		&:disabled {
			opacity: 0.6;
			background: #d9d9d9;
			box-shadow: none;
		}
		
		.btn-icon {
			margin-right: 15rpx;
			font-size: 28rpx;
		}
	}
}

// 加载遮罩
.loading-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	
	.loading-content {
		background: white;
		padding: 60rpx;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.loading-spinner {
			width: 60rpx;
			height: 60rpx;
			border: 4rpx solid #f3f3f3;
			border-top: 4rpx solid #667eea;
			border-radius: 50%;
			animation: spin 1s linear infinite;
			margin-bottom: 30rpx;
		}
		
		.loading-text {
			font-size: 28rpx;
			color: #666;
		}
	}
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

// 绑定状态显示
.binding-status {
	text-align: center;
	margin-bottom: 30rpx;
	padding: 40rpx;
	background: #ffffff;
	border-radius: 24rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
	border: 1rpx solid #f0f0f0;
	
	.status-icon {
		font-size: 80rpx;
		margin-bottom: 20rpx;
		
		&.success {
			color: #2DB295;
		}
		
		&.failed {
			color: #ff4d4f;
		}
		
		&.pending {
			color: #2DB295;
		}
	}
	
	.status-message {
		font-size: 28rpx;
		color: #333;
		line-height: 1.5;
	}
}

// 邀请人信息区域
.inviter-section {
	margin-bottom: 30rpx;
	padding: 40rpx;
	background: #ffffff;
	border-radius: 24rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
	border: 1rpx solid #f0f0f0;
	
	.inviter-title {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		
		.title-icon {
			font-size: 32rpx;
			margin-right: 15rpx;
		}
		
		text {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}
	}
	
	.inviter-card {
		background: rgba(45, 178, 149, 0.05);
		padding: 30rpx;
		border-radius: 15rpx;
		border: 1rpx solid rgba(45, 178, 149, 0.1);
		
		.inviter-name {
			display: block;
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 10rpx;
		}
		
		.inviter-id {
			display: block;
			font-size: 24rpx;
			color: #2DB295;
			font-weight: 500;
		}
	}
}

// 绑定说明区域
.binding-info {
	margin-bottom: 30rpx;
	padding: 40rpx;
	background: #ffffff;
	border-radius: 24rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
	border: 1rpx solid #f0f0f0;
	
	.info-title {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		
		.title-icon {
			font-size: 32rpx;
			margin-right: 15rpx;
		}
		
		text {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}
	}
	
	.info-content {
		.info-text {
			display: block;
			font-size: 26rpx;
			color: #666;
			line-height: 1.6;
			margin-bottom: 15rpx;
			
			&:last-child {
				margin-bottom: 0;
			}
		}
	}
}

